<template>
  <div class="workbench-container">
    <div class="workbench-header">
      <div class="left">
        <span>工作台</span>
        <Popover placement="bottom" width="240" v-model="visible">
          <div class="popover-container">
            <div>
              <label>文件夹名:</label>
              <input type="text" v-model="addFolderName" />
            </div>
            <div class="btn">
              <button @click="addFolder">确定</button>
            </div>
          </div>
          <span slot="reference" class="iconfont icon-icon-test"></span>
        </Popover>
      </div>
      <div class="right">
        <span
          :class="{ active: isLong }"
          class="long iconfont icon-shupai"
          @click="setIsLong(1)"
        ></span>
        <span
          :class="{ active: !isLong }"
          class="short iconfont icon-hengpai"
          @click="setIsLong(0)"
        ></span>
      </div>
    </div>
    <div class="folder-container">
      <ul>
        <li
          v-for="item in folderList"
          :key="item.id"
          :style="{ width: isLong ? '290px' : '100%' }"
          :class="{ long: !isLong }"
          @click="handleClick($event, item)"
        >
          <div class="logo">
            <span
              class="iconfont icon-folder-s"
              :style="{ color: item.color }"
            ></span>
            <span
              class="contentEditable"
              contentEditable="true"
              @focus="contentEditableFocus"
              @blur="contentEditableBlur($event, item)"
              @click="contentEditClick($event)"
            >
              {{ item.name }}
            </span>
          </div>
          <span class="time">{{ processingDate(item.creatiedTime) }}</span>
          <div class="tool">
            <span
              @click="handleFolderDelete($event, item)"
              class="iconfont icon-shanchu"
            ></span>
          </div>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <Pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 25, 50, 75, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="folderAllCount"
      >
        ></Pagination
      >
    </div>
  </div>
</template>
<script>
import {
  findFolder,
  createFolder,
  findFolderAllCount,
  deleteFolder,
  editFolderName,
} from "@/api/folder";
import el from "element-ui";
import processingDate from "@/util/processing-date";
export default {
  components: {
    Popover: el.Popover,
    Pagination: el.Pagination,
  },
  data() {
    return {
      folderList: [],
      isLong: +localStorage.getItem("isLong"),
      visible: false,
      addFolderName: "",
      currentPage: 1,
      folderAllCount: 0,
      pageSize: 10,
      currentChange: 1,
      contentEditableSpanValue: null, //用于判断是否改变过该值
    };
  },
  methods: {
    init() {
      findFolder(this.currentChange, this.pageSize).then((result) => {
        this.folderList = result;
      });
      // 获取所有的任务
      findFolderAllCount().then((result) => {
        this.folderAllCount = result.length;
      });
    },
    setIsLong(val) {
      localStorage.setItem("isLong", val);
      this.isLong = +localStorage.getItem("isLong");
    },
    // 添加文件夹
    addFolder() {
      if (this.addFolderName == "") {
        this.$message({
          showClose: true,
          message: "文件夹名字不能为空!",
          type: "warning",
        });
        return;
      }
      createFolder(this.addFolderName).then((result) => {
        this.visible = false;
        if (result) {
          this.init();
          this.addFolderName = "";
        }
      });
    },
    // 分页插件
    handleSizeChange(val) {
      //每页几条
      this.pageSize = val;
      this.currentChange = 1;
      this.init();
    },
    handleCurrentChange(val) {
      //第几页
      this.currentChange = val;
      this.init();
    },
    // 删除文件夹
    handleFolderDelete(e, item) {
      e.stopPropagation();
      this.$confirm("是否删除此项?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (item.isDelete) {
            this.$message({
              showClose: true,
              message: "您没有权限删除!",
              type: "warning",
            });
          } else {
            deleteFolder(item.id).then((result) => {
              if (result > 0) {
                this.$message({
                  showClose: true,
                  message: "删除成功!",
                  type: "success",
                });
                this.init();
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 聚焦
    contentEditableFocus(e) {
      e.stopPropagation();
      this.contentEditableSpanValue = e.target.innerText;
    },
    // 失焦
    contentEditableBlur(e, item) {
      e.stopPropagation();
      let name = e.target.innerText;
      if (name == this.contentEditableSpanValue) return;
      editFolderName(item.id, name).then((result) => {
        if (result[0] > 0) {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        }
      });
    },
    // 为了阻止冒泡事件,防止修改时跳转路由
    contentEditClick(e) {
      e.stopPropagation();
    },
    // 跳转路由
    handleClick(e, item) {
      localStorage.setItem("folderName", item.name);
      localStorage.setItem("filderId", item.id);
      this.$router.push(`/home/workbench/files`);
    },
    // 处理时间格式
    processingDate(date) {
      return processingDate(date);
    },
  },
  comtuted: {},
  mounted() {
    this.init();
  },
};
</script>
<style lang="less" scoped>
@import "./style.less";
</style>